<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>计算属性——computed：对data中的数据，进行一些复杂的计算，得出一个结果</p>
    <p>用来做计算的一个属性,可以当做是data中的一个数据</p>
    <p>特点：依赖缓存。将计算结果缓存起来，方便下次使用。如果依赖的数据没有发生变化，结果相同，则不会再次执行，直接缓存中的结果。当依赖变化时，将会重新计算。</p>
    <p>
      计算属性和侦听的区别：
      1.一个数据的变化会影响多个数据时，用侦听。侦听变化的根源，监听最本质的原因；
      2.多个数据的变化会影响一个数据时，用计算属性。得出一个结果，受多个因素影响；
      计算属性和方法的区别：
      1.方法每调用一次就执行一次，计算属性会使用缓存；
      2.方法没有缓存，计算属性有缓存；
      3.当源数据变化时，方法和计算属性都会更新
    </p>
    <p>{{ reverseStr }}</p>
    <hr>
    <table border="1">
      <tr>
        <td>
          <input type="checkbox">
          全选
        </td>
        <td>商品名称</td>
        <td>商品数量</td>
        <td>商品价格</td>
      </tr>
      <tr v-for="item in cart">
        <td><input type="checkbox"></td>
        <td>{{item.name}}</td>
        <td>{{item.num}}</td>
        <td>{{item.price}}</td>
      </tr>
      <tr>
        <td></td>
        <td>合计</td>
        <td>{{totalNum}}件</td>
        <td>{{totalPrice}}元</td>
      </tr>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        // 购物车的数据
        cart: [
          {name: 'iphone 11', num: 5, price: 4499 },
          {name: 'huawei p40', num: 7, price: 4899 },
          {name: 'mi 10', num: 11, price: 3499 },
        ]
      },
      // 计算属性
      computed: {
        // 解耦
        reverseStr() {
          return this.message.split('').reverse().join('')
        },
        // 总数量
        totalNum() {
          let num = 0;
          this.cart.forEach(item => {
            num += item.num
          });
          return num
        },
        // 总金额
        totalPrice() {
          let num = 0;
          console.log('computed');
          this.cart.forEach(item => {
            num += item.num * item.price
          });
          return num
        }
      },
      methods: {
        // 总数量
        getTotalNum() {
          let num = 0;
          this.cart.forEach(item => {
            num += item.num
          });
          return num
        },
        // 总金额
        getTotalPrice() {
          let num = 0;
          console.log('methods');
          this.cart.forEach(item => {
            num += item.num * item.price
          });
          return num
        },
      },
    })
  </script>
</body>
</html>